<template>
  <div>
    <el-card>
      <svg-icon
        icon-class="refresh"
        style="font-size: 25px"
        @click.native="refresh"
      ></svg-icon
      >刷新
      <!-- 表格 -->
      <el-table border :data="b" @selection-change="aaa">
        <el-table-column type="selection" align="center"> </el-table-column>

        <el-table-column
          prop="Name"
          label="姓名"
          width="180"
          align="center"
        ></el-table-column>
        <!-- <el-button type="primary" @click="change(scope.row)"
              >修改</el-button
            > -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-popconfirm title="你确定删除吗" @confirm="del(scope)">
              <el-button slot="reference"> 删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page="pageIndex"
        :page-size="pageNumbers"
        :total="count"
        @size-change="aa"
        @current-change="bb"
        :page-sizes="[1, 3, 5]"
        layout="prev, pager, next, jumper,->,sizes,total"
      >
      </el-pagination>
      <el-input v-model="search" placeholder="请示输入容" style="width: 50%">
      </el-input>
      <el-button type="primary" @click="searchs">搜素</el-button>
      <el-button type="primary" @click="changes">修改</el-button>
      <el-button type="primary" @click="add">添加</el-button>
      <!-- <el-button type="primary" @click="cancel">取消</el-button> -->
      <el-button type="primary" @click="delAll">删除全部</el-button>

      <el-dialog
        title="修改/添加"
        :visible.sync="dialogVisible"
        width="width"
        :before-close="dialogBeforeClose"
      >
        <el-form :model="from" :rules="rules" ref="ruleForm">
          <el-form-item label="姓名" prop="Name">
            <el-input v-model="from.Name" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="编号" prop="No">
            <el-input
              v-model="from.No"
              placeholder=""
              :disabled="isShow"
            ></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer">
          <el-button type="primary" @click="confirmed" v-if="isShow"
            >修 改</el-button
          >
          <el-button type="primary" @click="adds" v-else>添 加</el-button>

          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  // 依赖注入
  inject: ["shuaxin"],
  data() {
    return {
      rules: {
        Name: [
          {
            required: true,
            message: "请填写姓名",
            trigger: "blur",
          },
        ],
        No: [
          {
            required: true,
            message: "请填写编号",
            trigger: "blur",
          },
        ],
      },
      search: "", //搜素
      //   分页
      pageIndex: 1, //当前页码
      pageNumbers: 3, //每页数量
      count: 0, //总数
      a: [
        {
          No: 1,
          Name: "11",
        },
        {
          No: 2,
          Name: "22",
        },
        {
          No: 3,
          Name: "33",
        },
        {
          No: 4,
          Name: "44",
        },
        {
          No: 5,
          Name: "55",
        },

        {
          No: 6,
          Name: "66",
        },
        {
          No: 7,
          Name: "77",
        },
        {
          No: 8,
          Name: "767",
        },
        {
          No: 9,
          Name: "677",
        },
        {
          No: 10,
          Name: "7765",
        },
        {
          No: 11,
          Name: "333677",
        },
      ], //原始数据
      b: [], //分页数据
      from: {
        Name: "",
        No: "",
      }, //表单数据
      dialogVisible: false, //控制dialog显示和隐藏
      isShow: false, //控制dialog里面添加和修改的切换·
      shows: [], //点击选中框的数组数据
    };
  },
  methods: {
    // 刷新
    refresh() {
      this.shuaxin();
    },
    // 搜素
    searchs() {
      if (!this.search) {
        this.$message("请输入内容");
      } else {
        let arr = this.a.filter((r) => r.Name.includes(this.search));
        if (arr.length == 0) {
          this.$message("查不到");
        } else {
          this.a = arr;
          // this.count = arr.length;
          // this.pageIndex = 1;
          // this.b = arr.slice(
          //   (this.pageIndex - 1) * this.pageNumbers,
          //   this.pageNumbers * this.pageIndex
          // );
          this.getList();
        }
      }
    },
    //删除单个
    del(scope) {
      let id = scope.row.No;
      let logs = this.shows.findIndex((r) => r.No == id);
      if (logs == -1) {
        this.$message({
          type: "error",
          message: "当前未选中",
        });
      } else {
        if (this.shows.length > 1) {
          this.$message("删除一个");
        } else {
          let index = this.a.findIndex((r) => r.No == id);
          this.a.splice(index, 1);
          this.getList();
        }
      }
    },
    // 删除全部
    delAll() {
      let arr = [];
      if (this.shows.length >= 1) {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "删除", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.shows.forEach((r) => {
              let index = this.a.findIndex((item) => item.No == r.No);
              console.log(index);
              this.a.splice(index, 1);
              this.getList();
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else {
        this.$message("请选择");
      }
    },
    // 关闭dialog
    dialogBeforeClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          this.$refs.ruleForm.resetFields();
          done();
        })
        .catch((_) => {});
    },
    // 分页数据
    getList() {
      this.b = this.a.slice(
        (this.pageIndex - 1) * this.pageNumbers,
        this.pageNumbers * this.pageIndex
      );
      this.count = this.a.length;
      //    this.pageIndex=Math.ceil(this.count/this.pageNumbers)
    },
    // 切换每页数量
    aa(e) {
      this.pageNumbers = e;
      this.getList();
    },
    // 切换页码
    bb(e) {
      this.pageIndex = e;
      this.getList();
    },
    // 点击多选框收集数据
    aaa(val) {
      this.shows = val;
    },
    // 添加按钮
    add() {
      this.dialogVisible = true;
      this.isShow = false;
    },
    // 修改按钮
    changes() {
      if (this.shows.length < 1) {
        this.$message("请选择修改的内容");
      } else {
        if (this.shows.length > 1) {
          this.$message("请选择一个");
        } else {
          this.from = {
            ...this.shows[0],
          };
          this.isShow = true;
          this.dialogVisible = true;
        }
      }
    },
    cancel() {
      this.dialogVisible = false;
      this.$refs.ruleForm.resetFields();
    },

    // dialog修改按钮
    confirmed() {
      let index = this.a.findIndex((r) => r.No == this.from.No);
      this.a[index] = {
        ...this.from,
      };
      this.getList();
      this.dialogVisible = false;
      Object.assign(this._data.from, this.$options.data().from);
    },
    // dialog添加按钮
    adds() {
      let No = this.a.findIndex((r) => r.No == this.from.No);
      // if (!this.from.Name || !this.from.No) {
      // 	this.$message("内容不为空");
      // } else {
      // 	if (No !== -1) {
      // 		this.$message("已存在");
      // 	} else {
      // 		this.a.push({
      // 			...this.from
      // 		});
      // 		this.getList();
      // 		this.dialogVisible = false
      // 		Object.assign(this._data.from, this.$options.data().from);
      // 	}
      // }
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (No !== -1) {
            this.$message("已存在");
          } else {
            this.a.push({
              ...this.from,
            });
            this.getList();
            this.dialogVisible = false;
            Object.assign(this._data.from, this.$options.data().from);
          }
        } else {
          return false;
        }
      });
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
